import React, { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { Card, Typography, Tabs, Button } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import MainLayout from '../../../components/MainLayout';
import TransferStats from './components/TransferStats';
import WeeklyStats from './components/WeeklyStats';
import Toast from '../../../components/Toast';
import './NetworkPoints.css';

const { Title } = Typography;

const NetworkPoints = () => {
  const { networkId } = useParams();
  const [showToast, setShowToast] = useState(false);
  const [toastMessage, setToastMessage] = useState('');

  const showToastMessage = (message) => {
    setToastMessage(message);
    setShowToast(true);
  };

  // Tabs 配置
  const tabItems = [
    {
      key: 'transfer',
      label: '传输统计',
      children: (
        <TransferStats 
          networkId={networkId} 
          onError={showToastMessage} 
        />
      )
    },
    {
      key: 'weekly',
      label: '周期统计',
      children: (
        <WeeklyStats 
          networkId={networkId} 
          onError={showToastMessage} 
        />
      )
    }
  ];

  return (
    <MainLayout>
      <div className="network-points-container">
        <div className="network-points-header">
          <Link to="/points" className="back-link">
            <ArrowLeftOutlined />
            返回积分中心
          </Link>
          <Title level={2}>网络积分详情</Title>
        </div>

        <Card>
          <Tabs 
            defaultActiveKey="transfer" 
            size="large"
            items={tabItems}
          />
        </Card>

        {showToast && (
          <Toast 
            message={toastMessage} 
            onClose={() => setShowToast(false)} 
          />
        )}
      </div>
    </MainLayout>
  );
};

export default NetworkPoints; 